<template>
  <div>
    <van-nav-bar class="nav-bar">
      <template #left>
        <van-icon name="smile" size="18" class="smile" />
        <span>湖南征信认证家服务公司</span>
      </template>
    </van-nav-bar>
    <!-- 推荐内容 -->
    <div
     class="recom-content"
     v-for="item in company"
     :key="item.id"
     @click="$router.push(`/companyDetail/${item.id}`)">
      <van-image class="avatar" src="" fit="cover" />
      <span class="name">{{item.name}}</span>
      <span class="slogan">{{item.slogan}}</span>
      <div class="flag">
        <span>{{item.flag.flag1}}</span>
        <span>{{item.flag.flag2}}</span>
        <span>{{item.flag.flag3}}</span>
      </div>
      <div class="address">
        <van-icon name="location" class="location"/>
        <span class="km">{{item.distance}} </span>
        <span> {{item.position}}</span>
      </div>
    </div>
    <!-- /推荐内容 -->
    <!-- 推荐内容 -->
    <!-- <div class="recom-content">
      <van-image class="avatar" src="" fit="cover" />
      <span class="name">湖南金管家家政服务有限公司</span>
      <span class="slogan">您的笑容（满意），我们的追求</span>
      <div class="flag">
        <span>协会成员</span>
        <span>服务好</span>
        <span>环境优美</span>
      </div>
      <div class="address">
        <van-icon name="location" class="location"/>
        <span class="km">22.68km </span>
        <span> 湖南省长沙市天心区暮云工业园开服曼城住宅...</span>
      </div>
    </div> -->
    <!-- /推荐内容 -->
    <!-- 推荐内容 -->
    <!-- <div class="recom-content">
      <van-image class="avatar" src="" fit="cover" />
      <span class="name">湖南金管家家政服务有限公司</span>
      <span class="slogan">您的笑容（满意），我们的追求</span>
      <div class="flag">
        <span>协会成员</span>
        <span>服务好</span>
        <span>环境优美</span>
      </div> -->
      <!-- bug 诡异老师建议用flex布局尝试一下 -->
      <!-- <div class="address">
        <van-icon name="location" class="location"/>
        <span class="km">22.68km </span>
        <span> 湖南省长沙市天心区暮云工业园开服曼城住宅...</span>
      </div>
    </div> -->
    <!-- /推荐内容 -->
    <!-- 更多选择 -->
    <div class="more">
      <van-button color="#7B7777" plain @click="$router.push('/company')">更多公司 ></van-button>
    </div>
    <!-- /更多选择 -->
  </div>
</template>

<script>
import { getCompanyInfo } from '@/api/index.js'

export default {
  data () {
    return {
      company: {}
    }
  },
  created () {
    this.getCompanyInfo()
  },
  mounted () {

  },
  methods: {
    async getCompanyInfo () {
      const { data } = await getCompanyInfo()
      this.company = data
    }
  }
}
</script>

<style scoped lang="less">
.nav-bar {
  border-bottom: 1px solid rgba(240, 238, 238, 100);
  z-index:1;
}
.smile {
  color: rgba(151, 145, 145, 100);
  margin-left: 20px;
  margin-right: 20px;
}
.avatar {
  width: 160px;
  height: 172px;
  margin-left: 36px;
  margin-top: 24px;
  margin-right: 22px;
  vertical-align: bottom;
}
.name {
  position: absolute;
  top: 26px;
  left: 218px;
  font-size: 28px;
}
.recom-content {
  position: relative;
  address:last-of-type {  // 这里
      border-bottom: transparent!important;
  }
}
.slogan {
  position: absolute;
  top: 90px;
  left: 218px;
  font-size: 24px;
  color: #979191;
}
.flag {
  height: 46px;
  display: inline-block;
  position: absolute;
  top: 150px;
  left: 218px;
  display: flex;
  span {
    padding: 10px;
    margin-right: 5px;
    border: 1px solid #3F51B5;
    border-radius: 46px;
    font-size: 20px;
    // margin-right: 16px;
    color: #3F51B5;
  }
}

 // 底部边框做法 我是用最下面那个包含三个 行内元素的div标签地边框做的，
.address { // 不是用整个包含图片的盒子做的，主要是后来才发现，刚开始布局的时候有问题
  // padding-left: 36px;
  // position: relative;
  padding-bottom: 30px;
  // top: 220px;
  margin-top: 24px;
  border-bottom: 1px solid #F0EEEE;
  margin-left: 34px;
  margin-right: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  .location {
    margin-right: 14px;
    font-size: 36px;
    color: #979191;
    // vertical-align: top;
    vertical-align: bottom;
  }
  span {
    font-size: 24px;
    color: #979191;
  }
  .km {
    color: #101010;
    margin-right: 34px;
  }
}
// .more {
//   font-size: 24px!important;
//   color: #3F51B5!important;
// }
.more {
  text-align: center;
  .van-button {
    border: none;
    font-size: 24px;
  }
}
</style>
